<script setup>

import {onMounted, ref} from "vue";
import {doGet, doPost, doPut} from "@/util/request.js";
import {useRoute, useRouter} from "vue-router";
import {showMessage} from "@/util/message.js";

//对话框打开
const dialogVisible = ref(true)
//用户详情对象
const userDetail = ref({})
// 获取路由参数
const route = useRoute()
//获取路由对象
const router = useRouter()
//操作类型
const type=ref('add')
//查询用户详情
const loadUserDetail = (userId) => {
  //发送请求，获取用户详情
  doGet('/api/user/detail/' + userId, {}).then(resp => {
    if (resp.data.code === 200) {
      userDetail.value = resp.data.data
    } else {
      showMessage('查询用户详情失败', resp.data.msg, 'error')
    }
  })
}
/*-----------编辑信息------------*/
//修改用户信息对象参数
/*const userData = ref({})*/
//提交修改信息对象参数
let editFrom = ref({})
//提交修改信息
const submitForm = () => {
  editFrom.value.validate((valid) => {
    if (valid) {
      const editData = {
        id: userDetail.value.id,
        loginAct: userDetail.value.loginAct,
        loginPwd: userDetail.value.loginPwd,
        name: userDetail.value.name,
        phone: userDetail.value.phone,
        email: userDetail.value.email,
        accountNoExpired: userDetail.value.accountNoExpired,
        credentialsNoExpired: userDetail.value.credentialsNoExpired,
        accountNoLocked: userDetail.value.accountNoLocked,
        accountEnabled: userDetail.value.accountEnabled
      };
      if (type.value==='edit') {
        //发送请求
        doPut('/api/user/editUser', editData).then(resp => {
          if (resp.data.code === 200) {
            console.log(resp.data.code)
            //提示信息
            showMessage('修改信息成功', 'success')
            //等待600毫秒
            setTimeout(() => {
              //刷新页面
              /* location.reload();*/
              //返回上一页
              router.go(-1)
            }, 600)
          } else {
            //提示信息
            showMessage('修改信息失败', 'error')
          }
        })
      } else if(type.value==='add'){
        //发送请求
        doPost('/api/user/addUser', editData).then(resp => {
          if (resp.data.code === 200) {
            //提示信息
            showMessage('添加用户成功', 'success')
            //等待600毫秒
            setTimeout(() => {
              //刷新页面
              /* location.reload();*/
              //返回上一页
              router.go(-1)
            }, 600)
          } else {
            //提示信息
            showMessage('添加用户失败', 'error')
          }
        })
      }
    } else {
      showMessage('请检查信息是否完整', 'error')
    }
  })
}

//下拉框数据
const options1 = ref([
  {value: 1, label: '未过期'},
  {value: 0, label: '已过期'}
])
const options2 = ref([
  {value: 1, label: '未锁定'},
  {value: 0, label: '已锁定'}
])
const options3 = ref([
  {value: 1, label: '可用'},
  {value: 0, label: '不可用'}
])
//修改用户信息验证规则
const editUser = ref({
  loginAct: [
    {required: true, message: '请输入账号', trigger: 'blur'},
    {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
  ],
  loginPwd: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
  ],
  name: [
    {required: true, message: '请输入姓名', trigger: 'blur'},
    {pattern: /^[\u4e00-\u9fa5]+$/, message: '请输入中文姓名', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入电话号码', trigger: 'blur'},
    {min: 11, max: 11, message: '长度为11位', trigger: 'blur'},
    {pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
  ],
  email: [
    {required: true, message: '请输入邮箱地址', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']},
    {pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱地址', trigger: 'blur'}
  ],
  accountNoLocked: [
    {required: true, message: '请选择是否锁定', trigger: 'blur'}
  ],
  accountEnabled: [
    {required: true, message: '请选择是否可用', trigger: 'blur'}
  ],
  accountNoExpired: [
    {required: true, message: '请选择是否过期', trigger: 'blur'}
  ],
  credentialsNoExpired: [
    {required: true, message: '请选择是否过期', trigger: 'blur'}
  ]
})
/*-----------编辑信息------------*/
onMounted(() => {
  let userId = route.params.userId;
  if (userId){
    type.value='edit'
    loadUserDetail(userId)
  }else {
    type.value='add'
  }
})
</script>

<template>

  <el-dialog
      v-model="dialogVisible"
      width="700"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :align-center="true"
      :center="true"
      :show-close="false"
      :title="type==='edit'?'编辑用户':'添加用户'">
    <el-form
        ref="editFrom"
        :rules="editUser"
        :model="userDetail">
      <el-form-item label="编号: " v-if="type==='edit'">
        {{ userDetail.id }}
      </el-form-item>
      <el-form-item label="账号: " prop="loginAct">
        <el-input v-model="userDetail.loginAct"/>
      </el-form-item>
      <el-form-item label="密码: " prop="loginPwd" v-if="type==='add'">
        <el-input type="password" v-model="userDetail.loginPwd"/>
      </el-form-item>

      <el-form-item label="姓名: " prop="name">
        <el-input v-model="userDetail.name"/>
      </el-form-item>

      <el-form-item label="电话: " prop="phone">
        <el-input v-model="userDetail.phone"/>
      </el-form-item>

      <el-form-item label="邮箱: " prop="email">
        <el-input v-model="userDetail.email"/>
      </el-form-item>

      <el-form-item label="帐号是否过期：" prop="accountNoExpired">
        <el-select v-model="userDetail.accountNoExpired" placeholder="帐号是否过期：">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"/>
          <!--          <el-option label="未过期" value="1"/>
                    <el-option label="已过期" value="0"/>-->
        </el-select>
      </el-form-item>

      <el-form-item label="密码是否过期：" prop="credentialsNoExpired">
        <el-select v-model="userDetail.credentialsNoExpired" placeholder="密码是否过期：">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="帐号是否锁定：" prop="accountNoLocked">
        <el-select v-model="userDetail.accountNoLocked" placeholder="帐号是否锁定：">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="帐号是否可用：" prop="accountEnabled">
        <el-select v-model="userDetail.accountEnabled" placeholder="帐号是否可用：">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="修改时间: " v-if="type==='edit'">
        {{ userDetail.editTime }}
      </el-form-item>
    </el-form>
    <div style="margin-left: 500px">
      <el-button type="info" @click="router.back()">返回</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.el-form {
  margin-left: 80px;
}

.el-form-item {
  margin-left: 30px;
}

.el-select {
  width: 392px;
}

.el-input {
  width: 450px;
}

.el-col {
  margin-top: 20px;
  margin-left: 50px;
}
</style>